<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <!-- jQuery Include | MAKE SURE TO INCLUDE BEFORE ANGULAR -->
    <script src="../js/jquery-1.9.1.js"></script>
    
    <!-- Angular Include -->
    <script src="../angular/angular.min.js"></script>
    <script src="../angular/angular-animate.min.js"></script>

    <!-- Mobiscroll JS and CSS Includes -->
    <link href="css/mobiscroll.custom-2.17.1.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.custom-2.17.1.min.js" type="text/javascript"></script>

    <style type="text/css">
        /*****************************************************************/
        /* Demo Page styling, you can ignore this in your implementation */
        body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
        input, select { width: 100%; padding: .625em; margin: 0 0 .625em 0; border: 1px solid #aaa; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
        .header { padding: .625em; background: #5185a8;}
        .header h1 { margin: 0; padding: 0; color: #fff; text-align: center; font-size: 1.25em; font-weight: bold; text-shadow: 1px 1px 1px #000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
        #main, .demo-wrapper { padding: 1em; }
        button {
            display: inline-block;
            text-decoration: none;
            padding: 0.8em 2.6em;
            margin: 20px 10px 0 0;
            outline: 0;
            border: 0;
            overflow: visible;
            cursor: pointer;
            color: #fff;
            background: #5185a8;
            font-family: Arial, sans-serif, verdana;
            font-size: 14px;
            font-weight: 100;
            -webkit-transition: background 0.3s ease-out;
            -moz-transition: background 0.3s ease-out;
            -o-transition: background 0.3s ease-out;
            transition: background 0.3s ease-out;
        }
        
        button:hover {
            background: #34566d;
        }

        input {
            width: 100%;
            margin: 0 0 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 0;
            background: #fff;
            font-family: Arial, sans-serif,verdana;
            text-shadow: none;
            color: #000;
            font-size: 15px;
            -webkit-appearance: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .demo-iframe { 
            padding: 10px 10px 10px 10px; 
            text-shadow: none; 
        }
        /* Demo page styling END */
        /*************************/

        /* Basic usage demo styling */
        .demo-iframe.demo-stars { padding: 0; }
        .demo-stars .md-products { list-style: none; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -ms-touch-action: none; }
        .demo-stars .md-products li { position: relative; list-style: none; margin: 0; padding: 0; background: #f0f0f0; border-bottom: 1px solid #b1b1b1; border-top: 1px solid #fff; }
        .demo-stars .md-products li h3 { margin: 5px 0; font-weight: normal; }
        .demo-stars .md-products li p { margin: 5px 0; color: #717171; }
        .demo-stars .md-products li .md-product { height: 50px; padding: 5px 65px 5px 60px; color: #333; text-align: left; text-decoration: none; cursor: pointer; }
        .demo-stars .md-products li .md-active { background: #ddd; }
        .demo-stars .md-products li .md-rate { position: absolute; right: 0; top: 0; width: 60px; height: 60px; text-align: right; }
        .demo-stars .md-products li .md-rating { padding-right: 10px; font-size: 17px; line-height: 60px; }
        .demo-stars .md-products img { position: absolute; left: 0; top: 0; width: 60px; height: 60px; border: 0; }
        
        @media (max-width: 960px) {
        .demo-cont-c .demo-iframe.demo-stars { padding: 0; }
        .demo-cont-c .demo-phone-c .demo-phone { margin: 0 -20px 40px; }
        }

        /* Image Only demo styling */
        .dw-ul .dw-li .mbsc-img-w {text-align: center;}

        /* Basic usage demo styling */
        .md-color {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-indent: 40px;
            color: #000;
            border: 1px solid #000;
            background: #ff0000;
            margin: 5px 0;
            white-space: nowrap;
        }
        .demo-display-inline .md-color {
            display: block;
            width: auto;
            height: auto;
            text-indent: 0;
            margin: 0;
            border: 0;
            background: none !important;
        }
        .demo-display-inline .md-color .dw-inline {
            text-align: left;
        }

        /* Two inputs demo styling */
        .demo-display-inline .demo-twoinputs input,
        .demo-display-inline .demo-twoinputs label,
        .demo-display-inline .demo-twoinputs br { 
            display: none;
        }

        /* Create, remove, update demo styling */
        .demo-comp-listview .mbsc-lv-fixed-header-ctx { text-shadow: none; }
        .demo-comp-listview .demo-iframe { padding: 0; }
        .demo-comp-listview .demo-note { margin: 10px; }
        .md-demo-note { cursor: pointer; }
        .md-wo-list { line-height: 30px; text-shadow: none; }
        .md-wo-list li { line-height: normal; }
        .md-wo-status { font-size: 10px; -webkit-backface-visibility: hidden; }
        .md-wo-empty { padding: 10px; }

        /* Sort handle demo styling */
        .demo-comp-listview .mbsc-lv-fixed-header-ctx { text-shadow: none; }
        .demo-comp-listview .demo-iframe { padding: 0; }
        .demo-comp-listview .demo-note { margin: 10px; }
        .demo-sorthandle ul { font-size: 16px; }

        /* Action menu demo styling */
        .demo-comp-listview .mbsc-lv-fixed-header-ctx { text-shadow: none; }
        .demo-comp-listview .demo-iframe { padding: 0; }
        .demo-comp-listview .demo-note { margin: 10px; }
        .demo-actionmenu ul { 
            font-size: 18px; 
        }
        .demo-notification { 
            position: absolute; 
            width: 100%; 
            z-index: 100001; 
            left: 0; 
            bottom: 20px; 
            text-align: center; 
            opacity: 0;
            pointer-events: none;
            -webkit-transition: opacity 200ms;
            -moz-transition: opacity 200ms;
            transition: opacity 200ms;
        }
        .demo-notification-fixed { 
            position: fixed; 
        }
        .demo-notification-i { 
            display: inline-block; 
            background: #000; 
            color: #fff; 
            line-height: 20px; 
            text-shadow: none; 
            box-shadow: 0 0 3px rgba(0,0,0,.5); 
            border-radius: 3px; 
            padding: 5px;
        }
        .demo-notification-v { 
            opacity: 1;
        }

        /* Custom Icons demo styling */
        /*.dw-rating .dw-li .mbsc-rating-icon { color: rgb(230,19,0); }*/

        /* Tab menu demo styling */
        .demo-comp-menustrip #demombscr { position: static; }
        .demo-comp-menustrip .demo-iframe { padding: 0; min-height: 300px; }
        .demo-comp-menustrip .demo-phone-np .demo-phone { margin: 0 -20px -20px -20px; }
        .md-tab-h {
            display: none;
        }
        .md-tab-sel {
            display: block;
        }
        .md-app-ic {
            position: absolute;
            top: 50%;
            left: 15px;
            margin-top: -12px;
            font-size: 20px;
            line-height: 24px;
        }
        .md-app-detail {
            display: block;
            overflow: hidden;
        }
        .md-app-size {
            font-size: 10px;
            display: block;
            opacity: .6;
            float: left;
        }
        .md-app-date {
            font-size: 10px;
            display: block;
            opacity: .6;
            float: right;
        }
        .md-apps-ul li.mbsc-lv-item {
            padding-left: 50px;
        }
        
        .demo-display-top .md-apps-ul { padding-top: 47px; }
        .demo-display-top .mbsc-lv-android .md-apps-ul { padding-top: 34px; }
        .demo-display-top .mbsc-lv-android-holo .md-apps-ul { padding-top: 45px;}
        .demo-display-top .mbsc-lv-bootstrap .md-apps-ul { padding-top: 36px; }
        .demo-display-top .mbsc-lv-ios .md-apps-ul { padding-top: 42px; }
        .demo-display-top .mbsc-lv-ios-classic .md-apps-ul { padding-top: 38px; }
        .demo-display-top .mbsc-lv-jqm .md-apps-ul { padding-top: 33px; }
        .demo-display-top .mbsc-lv-sense-ui .md-apps-ul { padding-top: 39px; }
        .demo-display-top .mbsc-lv-sense .md-apps-ul { padding-top: 39px; }
        .demo-display-top .mbsc-lv-wp .md-apps-ul { padding-top: 75px; }
        
        .demo-display-bottom .demo-iframe.demo-tabs { padding-bottom: 75px; }

        /* Dialog demo styling */
        .md-text-center {text-align: center;}
        .md-dialog {width: 260px; margin: 0 auto;}

        /* Alert message demo styling */
        .md-body {max-width: 280px; margin: 0 auto;}

        /* Progress demo styling */
        .demo-comp-forms .md-demo .mbsc-progress-cont  {
            padding: 1em;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        .demo-comp-forms .md-upload.mbsc-progress,
        .demo-comp-forms .md-demo.mbsc-progress {
             overflow: hidden;   
        }
        
        .demo-comp-forms .md-demo .mbsc-progress-step-label {
            overflow: visible;
        }
        
        .demo-comp-forms .mbsc-wp .mbsc-progress {
            height: 2.25em;   
        }
        
        .demo-comp-forms .md-upload .mbsc-progress-cont {
            padding-right: 1em;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

    </style>

    <script>
        // -------------------------------------------------------------------
        // Demo page code START, you can ignore this in your implementation
        angular.element(document).ready(function() {
            angular.bootstrap($('#main'), ['mainModule']);
        });
        angular.module('mainModule', [])
        .controller('mainController', ['$scope', function($scope){
            $scope.alreadyBooted = {};
            $scope.templates = {};
            $scope.$watch('demo', changeDemo);

            var settings = ['theme', 'mode', 'display', 'language'];

            $scope.$watchGroup(settings, function() { 
                changeDemo($scope.demo);
            });

            var noDisplay = { listview: true, forms: true, menustrip: 'partial' },
                noMode = ['listview', 'menustrip', 'forms', 'numpad', 'widget'];

            $scope.noMode = function() {
                if (noMode.indexOf($scope.component) != -1) {
                    return true;
                } else {
                    return false;
                }
            }
            $scope.noDisplay = function() {
                return noDisplay[$scope.component];
            }

            function changeDemo(newValue){
                for(var demo in $scope.alreadyBooted)
                {
                    var scope = $('#demo_cont_'+demo).addClass('ng-hide');
                }

                if (newValue) {
                    $scope.component = newValue.split(/(?=[A-Z])/)[0];
                    if (noDisplay[$scope.component] == 'partial' && ($scope.display === 'modal' || $scope.display === 'bubble')) {
                        $scope.display = undefined;
                    }
                    
                    var element;
                    
                    if ($scope.alreadyBooted[newValue]) {
                        $('#demo_cont_'+newValue).remove();
                        $('body').append($($scope.templates[newValue]));
                        element = $('#demo_cont_'+newValue);
                    }
                    else {
                        $scope.alreadyBooted[newValue] = true;
                        element = $('#demo_cont_'+newValue);
                        $scope.templates[newValue] =  element[0].outerHTML;
                    }
                    
                    element.removeClass('ng-hide');
                    angular.module(newValue).config(demoPageConfigurator);
                    angular.bootstrap(element, [newValue]);
                }
                 
                function demoPageConfigurator($provide) {
                    $provide.decorator('$rootScope',['$delegate', function($delegate) {
                        for(var i =0;i<settings.length;i++)
                        {
                            $delegate[settings[i]] = $scope[settings[i]];    
                        }
                        return $delegate;
                    }]);    
                }
            }
        }]);
        // Demo page code END
        // -------------------------------------------------------------------

        /* Basic usage date demo script */
        angular
        .module('datetimeDate', ['mobiscroll-datetime'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
                theme: $scope.theme,      // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode         // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/datetime#!opt-mode
            };
        
        }]);

        /* Datetime with invalids demo script */
        angular
        .module('datetimeInvalid', ['mobiscroll-datetime'])
        .controller('demoController', ['$scope', function($scope) {

            var now = new Date();
        
            $scope.settings = {
                theme: $scope.theme,                                                  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                                                // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                                              // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                                                    // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/datetime#!opt-mode
                minDate: new Date(now.getFullYear(), now.getMonth(), now.getDate()),  // More info about minDate: http://docs.mobiscroll.com/angular/2-17-1/datetime#!opt-minDate
                invalid: [ 'w0', 'w6', '5/1', '12/24', '12/25' ]                      // More info about invalid: http://docs.mobiscroll.com/angular/2-17-1/datetime#!opt-invalid
            };
        
        }]);

        /* Basic usage time demo script */
        angular
        .module('datetimeTime', ['mobiscroll-datetime'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
                theme: $scope.theme,      // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/datetime#!opt-mode
                buttons: [],              // More info about buttons: http://docs.mobiscroll.com/angular/2-17-1/datetime#!opt-buttons
                headerText: false         // More info about headerText: http://docs.mobiscroll.com/angular/2-17-1/datetime#!opt-headerText
            };
        
        }]);

        /* Basic usage demo script */
        angular
        .module('selectBasic', ['mobiscroll-select'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,              // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/select#!opt-mode
                minWidth: 200                   // More info about minWidth: http://docs.mobiscroll.com/angular/2-17-1/select#!opt-minWidth
            };
        
        }]);

        /* Group options demo script */
        angular
        .module('selectGroupselect',['mobiscroll-select'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
        
        	theme: $scope.theme,   // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/select#!opt-mode
                label: 'City',            // More info about label: http://docs.mobiscroll.com/angular/2-17-1/select#!opt-label
                group: true,              // More info about group: http://docs.mobiscroll.com/angular/2-17-1/select#!opt-group
                groupLabel: 'Country',    // More info about groupLabel: http://docs.mobiscroll.com/angular/2-17-1/select#!opt-groupLabel
                fixedWidth: [100, 170]    // More info about fixedWidth: http://docs.mobiscroll.com/angular/2-17-1/select#!opt-fixedWidth
            };
        
        }]);

        /* Basic usage demo script */
        angular
        .module('ratingStars', ['mobiscroll-rating'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.data = [
                { imgsrc: 'product1.png', name: 'Chocolate sticks', id: '1', rating: 4 },
                { imgsrc: 'product2.png', name: 'Chocolate chips', id: '2', rating: 4 },
                { imgsrc: 'product3.png', name: 'Milk chocolate', id: '3', rating: 3 },
                { imgsrc: 'product4.png', name: 'Chocolate cupcake', id: '4', rating: 5 },
                { imgsrc: 'product5.png', name: 'Chocolate with air', id: '5', rating: 5 },
                { imgsrc: 'product6.png', name: 'Chocolate truffles', id: '6', rating: 3 }
            ];
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,              // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/rating#!opt-mode
                label: 'Rate Item'              // More info about label: http://docs.mobiscroll.com/angular/2-17-1/rating#!opt-label
            };

        }]);

        /* Grades demo script */
        angular
        .module('ratingGrades', ['mobiscroll-rating'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,              // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/rating#!opt-mode
                style: 'grade',                 // More info about style: http://docs.mobiscroll.com/angular/2-17-1/rating#!opt-style
                label: 'Rating'                 // More info about label: http://docs.mobiscroll.com/angular/2-17-1/rating#!opt-label
            };
        
        }]);

        /* Distance demo script */
        angular
        .module('distanceDistance', ['mobiscroll-measurement'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode               // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/distance#!opt-mode
            };
        
        }]);

        /* Speed demo script */
        angular
        .module('speedSpeed', ['mobiscroll-measurement'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode               // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/speed#!opt-mode
            };
        
        }]);

        /* Temperature demo script */
        angular
        .module('temperatureTemperature', ['mobiscroll-measurement'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode               // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/temperature#!opt-mode
            };
        
        }]);

        /* Mass demo script */
        angular
        .module('massMass', ['mobiscroll-measurement'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode               // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/mass#!opt-mode
            };
        
        }]);

        /* Force demo script */
        angular
        .module('forceForce', ['mobiscroll-measurement'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode               // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/force#!opt-mode
            };
        
        }]);

        /* Basic usage demo script */
        angular
        .module('listTreelist', ['mobiscroll-list'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,            // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                        // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/list#!opt-mode
                fixedWidth: [90,160,170],                 // More info about fixedWidth: http://docs.mobiscroll.com/angular/2-17-1/list#!opt-fixedWidth
                placeholder: 'Please Select ...',         // More info about placeholder: http://docs.mobiscroll.com/angular/2-17-1/list#!opt-placeholder
                labels: ['Region', 'Supervisor', 'Tech']  // More info about labels: http://docs.mobiscroll.com/angular/2-17-1/list#!opt-labels
            };
        
        }]);

        /* Image and Text demo script */
        angular
        .module('imageText',['mobiscroll-image'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.data = [
                { name: 'BMW', imgsrc: 'BMW_logo.png', p: 'BMW' },
                { name: 'Dacia', imgsrc: 'Dacia_logo.png', p: 'Dacia' },
                { name: 'Ferrari', imgsrc: 'ferrari_logo.png', p: 'Ferrari' },
                { name: 'Mercedes', imgsrc: 'mercedes_logo.png', p: 'Mercedes' },
                { name: 'Opel', imgsrc: 'opel_logo.png', p: 'Opel' },
                { name: 'Renault', imgsrc: 'renault_logo.png', p: 'Renault' },
                { name: 'Volkswagen', imgsrc: 'volkswagen_logo.png', p: 'Volkswagen' }			
            ];
        
            $scope.settings = {	
        
                theme: $scope.theme,     // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,             // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,           // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                 // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-mode
                placeholder: 'Please Select ...',  // More info about placeholder: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-placeholder
                labels: ['Make'],                  // More info about labels: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-labels
                enhance: true                      // More info about enhance: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-enhance
            };	
            
        }]);

        /* Image Only demo script */
        angular
        .module('imageBasic',['mobiscroll-image'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.data = [
                { name: '1', imgsrc: 'fruit-1.png' },
                { name: '2', imgsrc: 'fruit-2.png' },
                { name: '3', imgsrc: 'fruit-3.png' },
                { name: '4', imgsrc: 'fruit-4.png' },
                { name: '5', imgsrc: 'fruit-5.png' },
                { name: '6', imgsrc: 'fruit-1.png' },
                { name: '7', imgsrc: 'fruit-2.png' },
                { name: '8', imgsrc: 'fruit-3.png' },
                { name: '9', imgsrc: 'fruit-4.png' },
                { name: '10', imgsrc: 'fruit-5.png' },
                { name: '11', imgsrc: 'fruit-1.png' },
                { name: '12', imgsrc: 'fruit-2.png' },
                { name: '13', imgsrc: 'fruit-3.png' },
                { name: '14', imgsrc: 'fruit-4.png' },
                { name: '15', imgsrc: 'fruit-5.png' },
                { name: '16', imgsrc: 'fruit-1.png' },
                { name: '17', imgsrc: 'fruit-2.png' },
                { name: '18', imgsrc: 'fruit-3.png' },
                { name: '19', imgsrc: 'fruit-4.png' },
                { name: '20', imgsrc: 'fruit-5.png' }
            ];
        
            $scope.settings = {	
        
                theme: $scope.theme,      // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,              // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,            // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                  // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-mode
                labels: ['Select Favorite Fruit'],  // More info about labels: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-labels
                placeholder: 'Please Select ...',   // More info about placeholder: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-placeholder
                fixedWidth: 200,                    // More info about fixedWidth: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-fixedWidth
                enhance: true                       // More info about enhance: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-enhance
            };	
            
        }]);

        /* Unordered list demo script */
        angular
        .module('listUnordered', ['mobiscroll-list'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,     // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,             // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,           // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                 // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/list#!opt-mode
                labels: ['Ingredients'],           // More info about labels: http://docs.mobiscroll.com/angular/2-17-1/list#!opt-labels
                placeholder: 'Please Select ...',  // More info about placeholder: http://docs.mobiscroll.com/angular/2-17-1/list#!opt-placeholder
                fixedWidth: 200                    // More info about fixedWidth: http://docs.mobiscroll.com/angular/2-17-1/list#!opt-fixedWidth
            };
        
        }]);

        /* With time scroller demo script */
        angular
        .module('calendarTime', ['mobiscroll-calendar'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,   // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,           // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,         // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,               // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/calendar#!opt-mode
                controls: ['calendar', 'time'],  // More info about controls: http://docs.mobiscroll.com/angular/2-17-1/calendar#!opt-controls
                mode: 'mixed'                    // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/calendar#!opt-mode
            };
        
        }]);

        /* Basic usage demo script */
        angular
        .module('calendarBasic', ['mobiscroll-calendar'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
                theme: $scope.theme,      // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode         // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/calendar#!opt-mode
            };
        
        }]);

        /* Multi day select demo script */
        angular
        .module('calendarMultiday', ['mobiscroll-calendar'])
        .controller('demoController', ['$scope', function($scope) {

            var now = new Date(),
                year = now.getFullYear(),
                month = now.getMonth();
        
            $scope.settings = {
        
                theme: $scope.theme,                                                                     // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                                                                             // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                                                                           // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                                                                                 // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/calendar#!opt-mode
                counter: true,                                                                                     // More info about counter: http://docs.mobiscroll.com/angular/2-17-1/calendar#!opt-counter
                multiSelect: true,                                                                                 // More info about multiSelect: http://docs.mobiscroll.com/angular/2-17-1/calendar#!opt-multiSelect
                selectedValues: [ new Date(year, month, 1), new Date(year, month, 2), new Date(year, month, 10) ]  // More info about selectedValues: http://docs.mobiscroll.com/angular/2-17-1/calendar#!opt-selectedValues
            };
        
        }]);

        /* Multiple select demo script */
        angular
        .module('selectMultiple', ['mobiscroll-select'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,              // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/select#!opt-mode
                minWidth: 200                   // More info about minWidth: http://docs.mobiscroll.com/angular/2-17-1/select#!opt-minWidth
            };
        
        }]);

        /* Basic usage demo script */
        angular
        .module('timespanBasic', ['mobiscroll-timespan'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,              // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/timespan#!opt-mode
                wheelOrder: 'iiss'              // More info about wheelOrder: http://docs.mobiscroll.com/angular/2-17-1/timespan#!opt-wheelOrder
            };
        
        }]);

        /* Day/Hour/Minute span demo script */
        angular
        .module('timespanDhm', ['mobiscroll-timespan'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,              // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/timespan#!opt-mode
                wheelOrder: 'ddhhii'            // More info about wheelOrder: http://docs.mobiscroll.com/angular/2-17-1/timespan#!opt-wheelOrder
            };
        
        }]);

        /* Countdown demo script */
        angular
        .module('timerCountdown', ['mobiscroll-timer'])
        .controller('demoController', ['$scope', function ($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,                           // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                                   // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                                 // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                                       // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/timer#!opt-mode
                countDirection: 'down',                                  // More info about countDirection: http://docs.mobiscroll.com/angular/2-17-1/timer#!opt-countDirection
                targetTime: 10,                                          // More info about targetTime: http://docs.mobiscroll.com/angular/2-17-1/timer#!opt-targetTime
                maxWheel: 'minutes',                                     // More info about maxWheel: http://docs.mobiscroll.com/angular/2-17-1/timer#!opt-maxWheel
                minWidth: 100,                                           // More info about minWidth: http://docs.mobiscroll.com/angular/2-17-1/timer#!opt-minWidth
                onFinish: function () { alert('Countdown finished!'); }  // More info about onFinish: http://docs.mobiscroll.com/angular/2-17-1/timer#!event-onFinish
            };	
            
        }]);

        /* Basic usage demo script */
        	
        angular
        .module('colorHx', ['mobiscroll-color'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,   // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,           // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,         // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,               // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/color#!opt-mode
                onBeforeShow: function (inst) {  // More info about onBeforeShow: http://docs.mobiscroll.com/angular/2-17-1/color#!event-onBeforeShow
                    if ($(this).text()) {
                        inst.setVal($(this).text());
                    } else {
                        $(this).text('#colorHx-ff0000').css('background-color', 'red');
                    }
                },
                onSelect: function (v, inst) {   // More info about onSelect: http://docs.mobiscroll.com/angular/2-17-1/color#!event-onSelect
                    $(this).text(v).css('background-color', v);
                }
            };
        
        }]);

        /* Basic usage demo script */
        angular
        .module('rangeBasic', ['mobiscroll-range'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,                                  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                                          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                                        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                                              // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/range#!opt-mode
                defaultValue: [ new Date(2014, 3, 10), new Date(2014, 3, 17) ]  // More info about defaultValue: http://docs.mobiscroll.com/angular/2-17-1/range#!opt-defaultValue
            };
        
        }]);

        /* Time range demo script */
        angular
        .module('rangeTime', ['mobiscroll-range'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,              // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/range#!opt-mode
                controls: ['time'],             // More info about controls: http://docs.mobiscroll.com/angular/2-17-1/range#!opt-controls
                maxWidth: 100                   // More info about maxWidth: http://docs.mobiscroll.com/angular/2-17-1/range#!opt-maxWidth
            };
        
        }]);

        /* Two inputs demo script */
        angular
        .module('rangeTwoinputs', ['mobiscroll-range'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,            // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                        // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/range#!opt-mode
                startInput: '#rangeTwoinputs-startDate',  // More info about startInput: http://docs.mobiscroll.com/angular/2-17-1/range#!opt-startInput
                endInput: '#rangeTwoinputs-endDate'       // More info about endInput: http://docs.mobiscroll.com/angular/2-17-1/range#!opt-endInput
            };
        
        }]);

        /* Create, remove, update demo script */
        angular
        .module('listviewUpdate', ['mobiscroll-listview'])
        .controller('demoController', ['$scope', function ($scope) {

            var ids = 6;
        
            $scope.data = [
                { id: 1, title: 'Work order #listviewUpdate-0001', status: 'Assigned' },
                { id: 2, title: 'Work order #listviewUpdate-0002', status: 'Assigned' },
                { id: 3, title: 'Work order #listviewUpdate-0003', status: 'Assigned' },
                { id: 4, title: 'Work order #listviewUpdate-0004', status: 'Assigned' },
                { id: 5, title: 'Work order #listviewUpdate-0005', status: 'Assigned' },
                { id: 6, title: 'Work order #listviewUpdate-0006', status: 'Assigned' }
            ];
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode,
                sortable: true,                 // More info about sortable: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-sortable
                iconSlide: true,                // More info about iconSlide: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-iconSlide
                altRow: true,                   // More info about altRow: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-altRow
                stages: [                       // More info about stages: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-stages
                    { 
                        percent: 25, 
                        color: 'crimson', 
                        icon: 'checkmark', 
                        text: 'Complete', 
                        action: function (item, inst, index) {
                            $scope.$apply(function () {
                                $scope.data[index].status = 'Completed';
                            });
        
                        }
                    },
                    { 
                        percent: -50, 
                        color: 'red', 
                        icon: 'remove', 
                        text: 'Delete', 
                        confirm: true, 
                        action: function (item, inst, index) {
                            $scope.$apply(function () {
                                $scope.data.splice(index, 1);
                            });
        
                            return false;
                        }
                    },
                    { 
                        percent: 50, 
                        color: 'green',
                        icon: 'plus',
                        text: 'Spawn',
                        undo: true,             // More info about undo: http://docs.mobiscroll.com/angular/2-17-1/listview#!methods-undo
                        action: function (item, inst, index) {
                            $scope.$apply(function () {
                                $scope.data.splice(index + 1, 0, {
                                    id: ++ids,
                                    title: 'Work order #listviewUpdate-000' + ids + ' created from WO #listviewUpdate-000' + $scope.data[index].id,
                                    status: 'Assigned'
                                });
                            });
        
                        }
                    },
                    {
                        percent: -25, 
                        color: 'olive',
                        icon: 'clock',
                        text: 'Pending',
                        action: function (item, inst, index) {
                            $scope.$apply(function () {
                                $scope.data[index].status = 'Pending';
                            });
        
                        }
                    }
                ]
            };

            $scope.reload = function () {
                window.location.reload();
            };

        }]);

        /* Sort handle demo script */
        angular
        .module('listviewSorthandle', ['mobiscroll-listview'])
        .controller('demoController', ['$scope', function ($scope) {

            $scope.data = [
                { imgsrc: 'm1.png', h3: 'Barry Lyon', p: '(202) 555-0193' },
                { imgsrc: 'f1.png', h3: 'Hortense Tinker', p: '(202) 555-0127' },
                { imgsrc: 'm2.png', h3: 'Carl Hambledon', p: '(202) 555-0147' },
                { imgsrc: 'f2.png', h3: 'Arlene Sharman', p: '(202) 555-0190' },
                { imgsrc: 'm3.png', h3: 'Noble Blythe', p: '(202) 555-0176' },
                { imgsrc: 'f3.png', h3: 'Angelica Geary', p: '(202) 555-0107' },
                { imgsrc: 'm4.png', h3: 'Lowell Christophers', p: '(202) 555-0120' },
                { imgsrc: 'f4.png', h3: 'Leilah Gregory', p: '(202) 555-0189' }
            ];
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode,
                swipe: false,                   // More info about swipe: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-swipe
                sortable: { handle: 'right' },  // More info about sortable: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-sortable
                enhance: true                   // More info about enhance: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-enhance
            };
        
        }]);

        /* Action menu demo script */
        angular
        .module('listviewActionmenu', ['mobiscroll-listview'])
        .controller('demoController', ['$scope', function($scope) {

            $scope.data = [
                {
                    type: 'folder', icon: 'folder', name: 'Music',
                    children: [
                        { type: 'music', icon: 'music', name: 'Track1' },
                        { type: 'music', icon: 'music', name: 'Track2' },
                        { type: 'music', icon: 'music', name: 'Track3' }
                    ]
                },
                {
                    type: 'folder', icon: 'folder', name: 'Photos',
                    children: [
                        { type: 'picture', icon: 'image2', name: 'Image 1' },
                        { type: 'picture', icon: 'image2', name: 'Image 2' },
                        { type: 'picture', icon: 'image2', name: 'Image 3' }
                    ]
                },
                {
                    type: 'folder', icon: 'folder', name: 'Videos',
                    children: [
                        { type: 'movie', icon: 'play', name: 'Movie 1' },
                        { type: 'movie', icon: 'play', name: 'Movie 2' },
                        { type: 'movie', icon: 'play', name: 'Movie 3' }
                    ]
                },
                {   type: 'picture', icon: 'image2', name: 'Image1' },
                {   type: 'picture', icon: 'image2', name: 'Image2' },
                {   type: 'picture', icon: 'image2', name: 'Image3' },
                {   type: 'picture', icon: 'image2', name: 'Image4' },
                {   type: 'picture', icon: 'image2', name: 'Image5' },
                {   type: 'picture', icon: 'file4', name: 'File 1' },
                {   type: 'picture', icon: 'file4', name: 'File 2' }
            ];
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode,
                enhance: true,                  // More info about enhance: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-enhance
                actions: [                      // More info about actions: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-actions
                    {
                        icon: 'link',
                        action: function (li, inst) {
                            notify('Linked');
                        }
                    },
                    {
                        icon: 'star3',
                        action: function (li, inst) {
                            notify('Starred');
                        }
                    },
                    {
                        icon: 'remove',
                        undo: true,             // More info about undo: http://docs.mobiscroll.com/angular/2-17-1/listview#!methods-undo
                        action: function (li, inst) {
                            inst.remove(li);
                            return false;
                        }
                    },
                    {
                        icon: 'download',
                        action: function (li, inst) {
                            notify('Downloaded');
                        }
                    },
                ],
                itemGroups: {                   // More info about itemGroups: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-itemGroups
                    folder: {
                        actions: [                      // More info about actions: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-actions
                            {
                                icon: 'link',
                                action: function (li, inst) {
                                    notify('Linked');
                                }
                            },
                            {
                                icon: 'star3',
                                action: function (li, inst) {
                                    notify('Starred');
                                }
                            },
                            {
                                icon: 'download',
                                action: function (li, inst) {
                                    notify('Downloaded');
                                }
                            },
                        ]
                    },
                    music: {
                        actions: [                      // More info about actions: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-actions
                            {
                                icon: 'link',
                                action: function (li, inst) {
                                    notify('Linked');
                                }
                            },
                            {
                                icon: 'star3',
                                action: function (li, inst) {
                                    notify('Starred');
                                }
                            },
                            {
                                icon: 'download',
                                action: function (li, inst) {
                                    notify('Downloaded');
                                }
                            },
                            {
                                icon: 'play',
                                action: function (li, inst) {
                                    notify('Playing...');
                                }
                            },
                            {
                                icon: 'remove',
                                undo: true,             // More info about undo: http://docs.mobiscroll.com/angular/2-17-1/listview#!methods-undo
                                action: function (li, inst) {
                                    inst.remove(li);
                                    return false;
                                }
                            }
                        ]
                    },
                    movie: {
                        actions: [                      // More info about actions: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-actions
                            {
                                icon: 'link',
                                action: function (li, inst) {
                                    notify('Linked');
                                }
                            },
                            {
                                icon: 'star3',
                                action: function (li, inst) {
                                    notify('Starred');
                                }
                            },
                            {
                                icon: 'download',
                                action: function (li, inst) {
                                    notify('Downloaded');
                                }
                            },
                            {
                                icon: 'play',
                                action: function (li, inst) {
                                    notify('Playing...');
                                }
                            },
                            {
                                icon: 'remove',
                                undo: true,             // More info about undo: http://docs.mobiscroll.com/angular/2-17-1/listview#!methods-undo
                                action: function (li, inst) {
                                    inst.remove(li);
                                    return false;
                                }
                            }
                        ]
                    },
                    picture:
                    {
                        actions: [                      // More info about actions: http://docs.mobiscroll.com/angular/2-17-1/listview#!opt-actions
                            {
                                icon: 'link',
                                action: function (li, inst) {
                                    notify('Linked');
                                }
                            },
                            {
                                icon: 'star3',
                                action: function (li, inst) {
                                    notify('Starred');
                                }
                            },
                            {
                                icon: 'download',
                                action: function (li, inst) {
                                    notify('Downloaded');
                                }
                            },
                            {
                                icon: 'print',
                                action: function (li, inst) {
                                    notify('Printing...');
                                }
                            },
                            {
                                icon: 'remove',
                                undo: true,             // More info about undo: http://docs.mobiscroll.com/angular/2-17-1/listview#!methods-undo
                                action: function (li, inst) {
                                    inst.remove(li);
                                    return false;
                                }
                            }
                        ]
                    }
                }
            };

            var notification = $('<div class="demo-notification"><div class="demo-notification-i"></div></div>').appendTo('body'),
                notificationTimer;
        
            function notify(text) {
        
                clearTimeout(notificationTimer);
                
                notification.show().find('.demo-notification-i').html(text);
        
                if (notification.hasClass('demo-notification-v')) {
                    notification.removeClass('demo-notification-v');
                    notificationTimer = setTimeout(function () {
                        notification.addClass('demo-notification-v');
                    }, 200);
                } else {
                    notification.addClass('demo-notification-v');
                }
         
                notificationTimer = setTimeout(function () { 
                    notification.removeClass('demo-notification-v'); 
                    notificationTimer = setTimeout(function () {
                       notification.hide();
                    }, 200);
                }, 2000);
            }
        
        }]);

        /* Custom Icons demo script */
        angular
        .module('ratingIcons', ['mobiscroll-rating'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,              // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/rating#!opt-mode
                label: 'Rating',                // More info about label: http://docs.mobiscroll.com/angular/2-17-1/rating#!opt-label
                icon: { filled: 'heart' }       // More info about icon: http://docs.mobiscroll.com/angular/2-17-1/rating#!opt-icon
            };
        
        }]);

        /* Decimal demo script */
        angular
        .module('numberDecimal', ['mobiscroll-number'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
                theme: $scope.theme,      // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,        // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/number#!opt-mode
                maxWidth: 100             // More info about maxWidth: http://docs.mobiscroll.com/angular/2-17-1/number#!opt-maxWidth
            };
        
        }]);

        /*  Decimal demo script */
        angular
        .module('numpadDecimal', ['mobiscroll-numpad'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
                theme: $scope.theme,      // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,    // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,  // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                min: 1,
                scale: 2,
                preset: 'decimal'         // More info about preset: http://docs.mobiscroll.com/angular/2-17-1/numpad#!opt-preset
            };
        
        }]);

        /* Currency demo script */
        angular
        .module('numpadCurrency', ['mobiscroll-numpad'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                preset: 'decimal',              // More info about preset: http://docs.mobiscroll.com/angular/2-17-1/numpad#!opt-preset
                prefix: '$',
                returnAffix: true
            };
        
        }]);

        /* Time demo script */
        angular
        .module('numpadTime', ['mobiscroll-numpad'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                preset: 'time',                 // More info about preset: http://docs.mobiscroll.com/angular/2-17-1/numpad#!opt-preset
                timeFormat: 'HH:ii A'
            };
        
        }]);

        /* Masked Entry - PIN demo script */
        angular
        .module('numpadPin', ['mobiscroll-numpad'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                template: 'dddd',               // More info about template: http://docs.mobiscroll.com/angular/2-17-1/numpad#!opt-template
                allowLeadingZero: true,         // More info about allowLeadingZero: http://docs.mobiscroll.com/angular/2-17-1/numpad#!opt-allowLeadingZero
                placeholder: '-',               // More info about placeholder: http://docs.mobiscroll.com/angular/2-17-1/numpad#!opt-placeholder
                mask: '*',                      // More info about mask: http://docs.mobiscroll.com/angular/2-17-1/numpad#!opt-mask
                validate: function (val) {      // More info about validate: http://docs.mobiscroll.com/angular/2-17-1/numpad#!event-validate
                    return {
                        invalid: val.length != 4
                    };
                }
            };
        
        }]);

        /* Date with min and max demo script */
        angular
        .module('datetimeMinmax', ['mobiscroll-datetime'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,        // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,              // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                    // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/datetime#!opt-mode
                minDate: new Date(2014, 8, 15),       // More info about minDate: http://docs.mobiscroll.com/angular/2-17-1/datetime#!opt-minDate
                maxDate: new Date(2024, 8, 14)    };  // More info about maxDate: http://docs.mobiscroll.com/angular/2-17-1/datetime#!opt-maxDate
        
        }]);

        /* Tab menu demo script */
        angular
        .module('menustripTabs', ['mobiscroll-menustrip'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,      // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,              // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,            // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                type: 'tabs',                       // More info about type: http://docs.mobiscroll.com/angular/2-17-1/menustrip#!opt-type
                onItemTap: function (item, inst) {  // More info about onItemTap: http://docs.mobiscroll.com/angular/2-17-1/menustrip#!event-onItemTap
                    $('.md-tab-h').removeClass('md-tab-sel');
                    $('#' + item.data('tab')).addClass('md-tab-sel');
                }
            };

            // Mobiscroll Menustrip initialization
            $('.md-apps-ul').mobiscroll().listview({ theme: $scope.theme, 
                swipe: false
            });
        
        }]);

        /* Icon and Text demo script */
        angular
        .module('imageIcons', ['mobiscroll-image'])
        .controller('demoController', ['$scope', function ($scope) {
        
            $scope.data = [
                { val: 'Share', icon: 'share', p: 'Share' },
                { val: 'Bookmark', icon: 'star', p: 'Bookmark' },
                { val: 'Flag', icon: 'flag', p: 'Flag' },
                { val: 'Tag', icon: 'tag', p: 'Tag' },
                { val: 'Download', icon: 'download', p: 'Download' },
                { val: 'Delete', icon: 'remove', p: 'Delete' }
            ];
        
            $scope.settings = {
        
                theme: $scope.theme,     // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,             // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,           // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                 // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-mode
                placeholder: 'Please Select ...',  // More info about placeholder: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-placeholder
                showLabel: false,                  // More info about showLabel: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-showLabel
                enhance: true                      // More info about enhance: http://docs.mobiscroll.com/angular/2-17-1/image#!opt-enhance
            };	
            
        }]);

        /* Step demo script */
        angular
        .module('numberStep', ['mobiscroll-number'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,  // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,          // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,        // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,              // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/number#!opt-mode
                layout: 'fixed',                // More info about layout: http://docs.mobiscroll.com/angular/2-17-1/number#!opt-layout
                step: 5                         // More info about step: http://docs.mobiscroll.com/angular/2-17-1/number#!opt-step
            };
        
        }]);

        /* Dialog demo script */
        angular
        .module('widgetDialog', ['mobiscroll-widget'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,   // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,           // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,         // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                buttons: [                       // More info about buttons: http://docs.mobiscroll.com/angular/2-17-1/widget#!opt-buttons
                    {
                        text: 'Great', 
                        handler: 'set'
                    },
                    {
                        text: 'I’ve been better', 
                        handler: 'cancel'
                    }
                ],
                onBeforeShow: function (inst) {  // More info about onBeforeShow: http://docs.mobiscroll.com/angular/2-17-1/widget#!event-onBeforeShow
                    var s = inst.settings;
                    
                    if (s.theme == 'wp' || s.baseTheme == 'wp') {
                        s.buttons[0].icon = 'checkmark';
                        s.buttons[1].icon = 'close';
                    }
                }
            };
        
        }]);

        /* Alert message demo script */
        angular
        .module('widgetMessage', ['mobiscroll-widget'])
        .controller('demoController', ['$scope', function($scope) {
        
            $scope.settings = {
        
                theme: $scope.theme,   // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,           // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,         // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,
                buttons: [                       // More info about buttons: http://docs.mobiscroll.com/angular/2-17-1/widget#!opt-buttons
                    { 
                        text: 'Agree', 
                        handler: 'set'
                    },
                    { 
                        text: 'Disagree', 
                        handler: 'cancel'
                    }
                ],
                onBeforeShow: function (inst) {  // More info about onBeforeShow: http://docs.mobiscroll.com/angular/2-17-1/widget#!event-onBeforeShow
                    var s = inst.settings;
                    
                    if (s.theme == 'wp' || s.baseTheme == 'wp') {
                        s.buttons[0].icon = 'checkmark';
                        s.buttons[1].icon = 'close';
                    }
                }
            };
        
        }]);

        /* Custom Units demo script */
        angular
        .module('scrollerCustomunits', ['mobiscroll-scroller'])
        .controller('demoController', ['$scope', function($scope) {

            var units = ['oz', 'g', 'serving'],
                prevUnit = 'oz',
                wheel = [[
                    {
                        values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
                    },
                    {
                        keys: ['', '1/4', '1/2', '3/4'],
                        values: ['-', '1/4', '1/2', '3/4']
                    },
                    {
                        values: units
                    }
                ]];
        
            $scope.settings = {
        	
                theme: $scope.theme,                      // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,                               // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,                             // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $scope.mode,                                   // More info about mode: http://docs.mobiscroll.com/angular/2-17-1/scroller#!opt-mode
                wheels: wheel,                                       // More info about wheels: http://docs.mobiscroll.com/angular/2-17-1/scroller#!opt-wheels
                validate: function (html, index, time, dir, inst) {  // More info about validate: http://docs.mobiscroll.com/angular/2-17-1/scroller#!event-validate
                    var i,
                        mult = 1,
                        currUnit = inst._tempWheelArray[2];
            
                    if (currUnit == 'g' && (prevUnit == 'oz' || prevUnit == 'serving')) {
                        mult = 28;
                    } else if ((currUnit != 'oz' || currUnit != 'serving') && prevUnit == 'g') {
                        mult = 1 / 28;
                    }
                    
                    if (currUnit != 'serving') {
                        $('.dwwl1 .dw-li:not(:first)', html).removeClass('dw-v');
                    } else {
                        $('.dwwl1 .dw-li', html).addClass('dw-v');
                    }
        
                    if (index == 2 && currUnit != prevUnit) {
                        for (i = 0; i < wheel[0][0].values.length; ++i) {
                            wheel[0][0].values[i] = Math.round(wheel[0][0].values[i] * mult);
                        }
        
                        inst._tempWheelArray[0] = inst._tempWheelArray[0] * mult;
                        inst.settings.wheels = wheel;
                        inst.changeWheel([0]);
                        prevUnit = currUnit;
                    }
                },
                parseValue: function (val) {
                    var hasUnit;
                    
                    if (val) {
                        val = val.toString().split(' ');
                        hasUnit = units.indexOf(val[1]) !== -1;
                        return [val[0], (hasUnit ? '' :val[1]), (hasUnit ? val[1] : val[2])];
                    }
                    
                    return [0, '', 'oz'];
                },
                formatValue: function (data) {
                    return (data[2] == 'serving' && data[0] == 0 && data[1] ? '' : data[0]) + (data[1] ? ' ' + data[1] : '') + ' ' + data[2];
                }
            };
        
        }]);

        /* Text Fields demo script */
        angular
        .module('formsTextfields',['mobiscroll-form'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };	
            
        }]);

        /* Select demo script */
        angular
        .module('formsSelect',['mobiscroll-form'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };	
            
        }]);

        /* Checkbox demo script */
        angular
        .module('formsCheckbox',['mobiscroll-form'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };	
            
        }]);

        /* Switch demo script */
        angular
        .module('formsSwitch',['mobiscroll-form'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };	
            
        }]);

        /* Radio buttons demo script */
        angular
        .module('formsRadiobtn',['mobiscroll-form'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };	
            
        }]);

        /* Buttons demo script */
        angular
        .module('formsButtons',['mobiscroll-form'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };	
            
        }]);

        /* Typography demo script */
        angular
        .module('formsTypography',['mobiscroll-form'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };	
            
        }]);

        /* Slider demo script */
        angular
        .module('formsSlider',['mobiscroll-form'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };	
            
        }]);

        /* Stepper demo script */
        angular
        .module('formsStepper',['mobiscroll-form', 'mobiscroll-numpad'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };
            
            $scope.numpadSettings = {
                preset: 'decimal',
                min: 5,
                max: 120,
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };
            
            $scope.allowOwerweight = false;
            $scope.consumption = 30;
            
        }]);

        /* Progress demo script */
        angular
        .module('formsProgress',['mobiscroll-form', 'mobiscroll-progress'])
        .controller('demoController', ['$scope', '$interval', '$timeout', function($scope, $interval, $timeout) {
            var interval, uploadInterval;
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };
            
            $scope.downloadVal = 0;
            $scope.processVal = 0;
            $scope.uploadVal = 0;
            $scope.checkoutVal = 0;
            
            $scope.startDownload = function() {
                $scope.downloadVal = 0;
                
                $interval.cancel(interval);
        		
                interval = $interval(function () {
                    if ($scope.downloadVal == 100) {
                        $interval.cancel(interval);
                    }
                    $scope.downloadVal += 5;
                }, 500);
            };
            
            $scope.startDownload()
            
            $scope.updateProgress = function () {
                if ($scope.processVal == 100) {
                    $scope.processVal = 0;
                } else {
                    $scope.processVal += 25;
                }
            };
            
            $scope.startUpload = function () {
                $scope.uploadVal = 0;
                
                $interval.cancel(uploadInterval);
        		
                uploadInterval = $interval(function () {
                    if ($scope.uploadVal >= 100) {
                        $interval.cancel(uploadInterval);
                    }
                    $scope.uploadVal += 17;
                }, 1000);
            };
            
            $scope.startUpload();
        
            $scope.updateCheckout = function () {
                if ($scope.checkoutVal >= 100) {
                    $scope.checkoutVal = 0;
                } else {
                    $scope.checkoutVal += 33.34;
                }
            };
            
            var uploadList = ['1MB', '5MB', '10MB', '50MB'],
                labelList = ['Cart', 'Signup', 'Checkout', 'Success'];
            
            $timeout(function () {
                $('.md-upload .mbsc-progress-step-label').each(function (i,v) {
                    $(v).text(uploadList[i]);
                });
                
                $('.md-demo .mbsc-progress-step-label').each(function (i,v) {
                    $(v).text(labelList[i]);
                });
            });
        
        }]);

        /* Segmented demo script */
        angular
        .module('formsSegmented',['mobiscroll-form'])
        .controller('demoController', ['$scope', function($scope) {
            
            $scope.settings = {
                theme: $scope.theme,    // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $scope.language,  // Specify language like: lang: 'pl' or omit setting to use default
                display: $scope.display,
                mode: $scope.mode
            };	
            
        }]);

        </script>
</head>
<body>
    <!-- ------------------------------------------------------------------ -->
    <!-- Demo configurator markup START, ignore this in your implementation -->
    <div class="header">
        <h1>Mobiscroll</h1>
    </div>
    <div id="main" ng-controller="mainController">
        <div>
            <label for="theme">Theme</label>
            <select ng-model="theme" name="theme" id="theme" class="settings">
                <option value="">Default / Auto</option>
                <option value="mobiscroll">Mobiscroll</option>
                <option value="ios">iOS</option>
            </select>
        </div>
        <div ng-hide="noMode()">
            <label for="mode">Mode</label>
            <select ng-model="mode" name="mode" id="mode" class="settings">
                <option value="">Default</option>
                <option value="scroller">Scroller</option>
                <option value="clickpick">Clickpick</option>
                <option value="mixed">Mixed</option>
            </select>
        </div>
        <div ng-hide="noDisplay() === true">
            <label for="display">Display</label>
            <select ng-model="display" name="display" id="display" class="settings">
                <option value="">Default</option>
                <option ng-show="noDisplay() !== 'partial'" value="modal">Modal</option>
                <option value="inline">Inline</option>
                <option ng-show="noDisplay() !== 'partial'" value="bubble">Bubble</option>
                <option value="top">Top</option>
                <option value="bottom">Bottom</option>
            </select>
        </div>
        <div>
            <label for="language">Language</label>
            <select ng-model="language" name="language" id="language" class="settings">
                <option value="">English</option>
            </select>
        </div>
        <div>
            <label for="demo">Demo</label>
            <select ng-model="demo" name="demo" id="demo" class="settings">
                <option value="">Please select a demo</option>
                <optgroup label="Datetime">
                    <option value="datetimeDate" selected>Basic usage date</option>
                    <option value="datetimeInvalid" >Datetime with invalids</option>
                    <option value="datetimeTime" >Basic usage time</option>
                    <option value="datetimeMinmax" >Date with min and max</option>
                </optgroup>
                <optgroup label="Select">
                    <option value="selectBasic" >Basic usage</option>
                    <option value="selectGroupselect" >Group options</option>
                    <option value="selectMultiple" >Multiple select</option>
                </optgroup>
                <optgroup label="Rating">
                    <option value="ratingStars" >Basic usage</option>
                    <option value="ratingGrades" >Grades</option>
                    <option value="ratingIcons" >Custom Icons</option>
                </optgroup>
                <optgroup label="Distance">
                    <option value="distanceDistance" >Distance</option>
                </optgroup>
                <optgroup label="Speed">
                    <option value="speedSpeed" >Speed</option>
                </optgroup>
                <optgroup label="Temperature">
                    <option value="temperatureTemperature" >Temperature</option>
                </optgroup>
                <optgroup label="Mass">
                    <option value="massMass" >Mass</option>
                </optgroup>
                <optgroup label="Force">
                    <option value="forceForce" >Force</option>
                </optgroup>
                <optgroup label="List">
                    <option value="listTreelist" >Basic usage</option>
                    <option value="listUnordered" >Unordered list</option>
                </optgroup>
                <optgroup label="Image">
                    <option value="imageText" >Image and Text</option>
                    <option value="imageBasic" >Image Only</option>
                    <option value="imageIcons" >Icon and Text</option>
                </optgroup>
                <optgroup label="Calendar">
                    <option value="calendarTime" >With time scroller</option>
                    <option value="calendarBasic" >Basic usage</option>
                    <option value="calendarMultiday" >Multi day select</option>
                </optgroup>
                <optgroup label="Timespan">
                    <option value="timespanBasic" >Basic usage</option>
                    <option value="timespanDhm" >Day/Hour/Minute span</option>
                </optgroup>
                <optgroup label="Timer">
                    <option value="timerCountdown" >Countdown</option>
                </optgroup>
                <optgroup label="Color">
                    <option value="colorHx" >Basic usage</option>
                </optgroup>
                <optgroup label="Range">
                    <option value="rangeBasic" >Basic usage</option>
                    <option value="rangeTime" >Time range</option>
                    <option value="rangeTwoinputs" >Two inputs</option>
                </optgroup>
                <optgroup label="Listview">
                    <option value="listviewUpdate" >Create, remove, update</option>
                    <option value="listviewSorthandle" >Sort handle</option>
                    <option value="listviewActionmenu" >Action menu</option>
                </optgroup>
                <optgroup label="Number">
                    <option value="numberDecimal" >Decimal</option>
                    <option value="numberStep" >Step</option>
                </optgroup>
                <optgroup label="Numpad">
                    <option value="numpadDecimal" > Decimal</option>
                    <option value="numpadCurrency" >Currency</option>
                    <option value="numpadTime" >Time</option>
                    <option value="numpadPin" >Masked Entry - PIN</option>
                </optgroup>
                <optgroup label="Menustrip">
                    <option value="menustripTabs" >Tab menu</option>
                </optgroup>
                <optgroup label="Widget">
                    <option value="widgetDialog" >Dialog</option>
                    <option value="widgetMessage" >Alert message</option>
                </optgroup>
                <optgroup label="Scroller">
                    <option value="scrollerCustomunits" >Custom Units</option>
                </optgroup>
                <optgroup label="Forms">
                    <option value="formsTextfields" >Text Fields</option>
                    <option value="formsSelect" >Select</option>
                    <option value="formsCheckbox" >Checkbox</option>
                    <option value="formsSwitch" >Switch</option>
                    <option value="formsRadiobtn" >Radio buttons</option>
                    <option value="formsButtons" >Buttons</option>
                    <option value="formsTypography" >Typography</option>
                    <option value="formsSlider" >Slider</option>
                    <option value="formsStepper" >Stepper</option>
                    <option value="formsProgress" >Progress</option>
                    <option value="formsSegmented" >Segmented</option>
                </optgroup>
            </select>
        </div>
    </div>
    <!-- Demo configurator markup END -->
    <!-- ------------------------------------------------------------------ -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage date START -->
    <div id="demo_cont_datetimeDate" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mydate" mobiscroll-date="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Basic usage date END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Datetime with invalids START -->
    <div id="demo_cont_datetimeInvalid" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mydatetime" mobiscroll-datetime="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Datetime with invalids END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage time START -->
    <div id="demo_cont_datetimeTime" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mytime" mobiscroll-time="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Basic usage time END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    
    <div id="demo_cont_selectBasic" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
    <select ng-model="myselect" mobiscroll-select="settings" mobiscroll-instance="demo">
        <option value="1">Atlanta</option>
        <option value="2">Berlin</option>
        <option value="3">Boston</option>
        <option value="4">Chicago</option>
        <option value="5">London</option>
        <option value="6">Los Angeles</option>
        <option value="7">New York</option>
        <option value="8">Paris</option>
        <option value="9">San Francisco</option>
    </select>

    <button ng-click="demo.clear()">Clear</button>
    <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Group options START -->
    <div id="demo_cont_selectGroupselect" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
    <select ng-model="myselect" mobiscroll-select="settings" mobiscroll-instance="demo">
        <optgroup label="USA">
            <option value="1">Atlanta</option>
            <option value="2">Boston</option>
            <option value="3">Chicago</option>
            <option value="4">Los Angeles</option>
            <option value="5">New York</option>
            <option value="6">San Francisco</option>
        </optgroup>
        <optgroup label="UK">
            <option value="7">Bath</option>
            <option value="8">Bristol</option>
            <option value="9">Cambridge</option>
            <option value="10">London</option>
            <option value="11">Leeds</option>
            <option value="12">Manchester</option>
            <option value="13">Newcastle</option>
            <option value="14">Oxford</option>
        </optgroup>
        <optgroup label="China">
            <option value="15">Beijing</option>
            <option value="16">Chongqing</option>
            <option value="17">Shanghai</option>
            <option value="18">Shenzhen</option>
            <option value="19">Tianjin</option>
        </optgroup>
    </select>

    <button ng-click="demo.clear()">Clear</button>
    <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Group options END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div id="demo_cont_ratingStars" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <ul class="md-products">
            <li ng-repeat="item in data">
                <div class="md-product" mobiscroll-rating="settings" ng-model="item.rating">
                    <img ng-src="images/{{item.imgsrc}}" />
                    <h3>{{item.name}}</h3>
                    <p>{{item.name}} </p>
                    <span class="md-rate">
                        <span class="md-rating">{{item.rating}} of 5</span>
                    </span>
                </div>
            </li>
        </ul>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Grades START -->
    <div id="demo_cont_ratingGrades" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myrating" mobiscroll-rating="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Grades END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Distance START -->
    <div id="demo_cont_distanceDistance" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mydistance" mobiscroll-distance="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Distance END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Speed START -->
    <div id="demo_cont_speedSpeed" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myspeed" mobiscroll-speed="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Speed END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Temperature START -->
    <div id="demo_cont_temperatureTemperature" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mytemperature" mobiscroll-temperature="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Temperature END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Mass START -->
    <div id="demo_cont_massMass" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mymass" mobiscroll-mass="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Mass END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Force START -->
    <div id="demo_cont_forceForce" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myforce" mobiscroll-force="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Force END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div id="demo_cont_listTreelist" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <ul ng-model="mylist" mobiscroll-list="settings" mobiscroll-instance="demo" style="display:none">
        <li data-val="Eastern Division">East
            <ul>
                <li data-val="Marketing">Marketing
                    <ul>
                        <li data-val="Eden E">Eden E</li>
                        <li data-val="Milda J">Milda J</li>
                        <li data-val="Porfirio R">Porfirio R</li>
                    </ul>
                </li>
                <li data-val="Research & Development">R&D
                    <ul>
                        <li data-val="Frances P">Frances P</li>
                        <li data-val="Frank D">Frank D</li>
                        <li data-val="Gianny P">Gianny P</li>
                        <li data-val="Ivan F">Ivan F</li>
                        <li data-val="John M">John M</li>
                        <li data-val="Mildred S">Mildred S</li>
                        <li data-val="Sam P">Sam P</li>
                    </ul>
                </li>
                <li data-val="Sales">Sales
                    <ul>
                        <li data-val="Edelmira R">Edelmira R</li>
                        <li data-val="Francie S">Francie S</li>
                        <li data-val="Lean F">Lean F</li>
                        <li data-val="Kirby C">Kirby C</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li data-val="Western Division">West
            <ul>
                <li data-val="Marketing">Marketing
                    <ul>
                        <li data-val="Cliff B">Cliff B</li>
                        <li data-val="Helen D">Helen D</li>
                        <li data-val="Stephan V">Stephan V</li>
                    </ul>
                </li>
                <li data-val="Research & Development">R&D
                    <ul>
                        <li data-val="Andy G">Andy G</li>
                        <li data-val="Danny A">Danny A</li>
                        <li data-val="Ennio M">Ennio M</li>
                        <li data-val="Emil E">Emil E</li>
                        <li data-val="Frank S">Frank S</li>
                        <li data-val="Gonzo G">Gonzo G</li>
                        <li data-val="Hal A">Hal A</li>
                        <li data-val="Jack G">Jack G</li>
                        <li data-val="John A">John A</li>
                        <li data-val="Simon D">Simon D</li>
                        <li data-val="Victor S">Victor S</li>
                    </ul>
                </li>
                <li data-val="Sales">Sales
                    <ul>
                        <li data-val="Dana A">Dana A</li>
                        <li data-val="Frank D">Frank D</li>
                        <li data-val="Leanna S">Leanna S</li>
                        <li data-val="Michael D">Michael D</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    
    <button ng-click="demo.clear()">Clear</button>
    <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Image and Text START -->
    <div id="demo_cont_imageText" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <ul mobiscroll-image="settings" mobiscroll-instance="demo" ng-model="selected" style="display:none">
        <li ng-repeat="item in data" data-val="{{item.name}}">
          <img ng-src="images/{{item.imgsrc}}" />
          <p>{{item.p}}</p>
        </li>
    </ul>
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Image and Text END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Image Only START -->
    <div id="demo_cont_imageBasic" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <ul mobiscroll-image="settings" mobiscroll-instance="demo" ng-model="selected" style="display:none">
        <li ng-repeat="item in data" data-val="{{item.name}}">
          <img ng-src="images/{{item.imgsrc}}" />
        </li>
    </ul>
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Image Only END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Unordered list START -->
    <div id="demo_cont_listUnordered" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <ul ng-model="mylist" mobiscroll-list="settings" mobiscroll-instance="demo" style="display:none">
        <li>Sugar</li>
        <li>Salt</li>
        <li>Butter</li>
        <li>Flour</li>
        <li>Chocolate</li>
    </ul>

    <button ng-click="demo.clear()">Clear</button>
    <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Unordered list END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- With time scroller START -->
    <div id="demo_cont_calendarTime" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mycalendar" mobiscroll-calendar="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- With time scroller END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    
    <div id="demo_cont_calendarBasic" class="ng-hide demo-wrapper"  ng-controller="demoController">

        <input ng-model="mycalendar" mobiscroll-calendar="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Multi day select START -->
    <div id="demo_cont_calendarMultiday" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mycalendar" mobiscroll-calendar="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Multi day select END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Multiple select START -->
    
    <div id="demo_cont_selectMultiple" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
    <select ng-model="myselect" mobiscroll-select="settings" mobiscroll-instance="demo" multiple>
        <option value="1">Books</option>
        <option value="2">Movies, Music & Games</option>
        <option value="3" selected>Electronics & Computers</option>
        <option value="4" selected>Home, Garden & Tools</option>
        <option value="5">Health & Beauty</option>
        <option value="6">Toys, Kids & Baby</option>
        <option value="7">Clothing & Jewelry</option>
        <option value="8">Sports & Outdoors</option>
        <option value="9">Automotive & Industrial</option>
    </select>

    <button ng-click="demo.clear()">Clear</button>
    <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Multiple select END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div id="demo_cont_timespanBasic" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mytimespan" mobiscroll-timespan="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Day/Hour/Minute span START -->
    <div id="demo_cont_timespanDhm" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mytimespan" mobiscroll-timespan="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Day/Hour/Minute span END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Countdown START -->
    <div id="demo_cont_timerCountdown" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mytimer" mobiscroll-timer="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    </div>
    <!-- Countdown END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div id="demo_cont_colorHx" class="ng-hide demo-wrapper"  ng-controller="demoController"><b>Please choose color</b><br/>
        <div ng-model="mycolor" mobiscroll-color="settings" mobiscroll-instance="demo" class="md-color">#ff0000</div>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div id="demo_cont_rangeBasic" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myrange" mobiscroll-range="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Time range START -->
    <div id="demo_cont_rangeTime" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myrange" mobiscroll-range="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Time range END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Two inputs START -->
    <div id="demo_cont_rangeTwoinputs" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <label for="rangeTwoinputs-startDate">Start</label><br/>
    <input id="rangeTwoinputs-startDate" placeholder="Please Select ..." readonly/>
    
    <label for="rangeTwoinputs-endDate">End</label><br/>
    <input id="rangeTwoinputs-endDate" placeholder="Please Select ..." readonly/>
        <div ng-model="myrange" mobiscroll-range="settings" mobiscroll-instance="demo"> </div>
    </div>
    <!-- Two inputs END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Create, remove, update START -->
    <div id="demo_cont_listviewUpdate" class="ng-hide demo-wrapper"  ng-controller="demoController">

    <div class="md-demo-note demo-note" ng-show="!data.length" ng-click="reload()">
        Whooa, list is empty. Tap here to refresh!
        &nbsp;<span class="mbsc-ic mbsc-ic-loop2"></span>
    </div>
    
    <ul mobiscroll-listview="settings" mobiscroll-data="data" style="display:none">
       <li data-id="{{item.id}}">{{item.title}}<div class="md-wo-status">{{item.status}}</div></li>
    </ul>
    
    </div>
    <!-- Create, remove, update END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Sort handle START -->
    <div id="demo_cont_listviewSorthandle" class="ng-hide demo-wrapper"  ng-controller="demoController">

    <ul mobiscroll-listview="settings" mobiscroll-data="data" style="display:none">
        <li><img ng-src="images/{{item.imgsrc}}" /><h3>{{item.h3}}</h3><p>{{item.p}}</p></li>
    </ul>
    
    </div>
    <!-- Sort handle END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Action menu START -->
    <div id="demo_cont_listviewActionmenu" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
    <ul mobiscroll-listview="settings" mobiscroll-data="data" style="display:none">
        <li data-type="{{item.type}}" data-icon="{{item.icon}}">{{item.name}}</li>
    </ul>
    
    </div>
    <!-- Action menu END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Custom Icons START -->
    <div id="demo_cont_ratingIcons" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myrating" mobiscroll-rating="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Custom Icons END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Decimal START -->
    <div id="demo_cont_numberDecimal" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumber" mobiscroll-number="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Decimal END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!--  Decimal START -->
    <div id="demo_cont_numpadDecimal" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumpad" mobiscroll-numpad="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!--  Decimal END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Currency START -->
    <div id="demo_cont_numpadCurrency" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumpad" mobiscroll-numpad="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Currency END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Time START -->
    <div id="demo_cont_numpadTime" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumpad" mobiscroll-numpad="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Time END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Masked Entry - PIN START -->
    <div id="demo_cont_numpadPin" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumpad" mobiscroll-numpad="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Masked Entry - PIN END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Date with min and max START -->
    <div id="demo_cont_datetimeMinmax" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mydate" mobiscroll-date="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Date with min and max END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Tab menu START -->
    <div id="demo_cont_menustripTabs" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <ul mobiscroll-menustrip="settings" mobiscroll-instance="demo" style="display:none">
        <li data-tab="tab-downloaded" data-selected="true">Downloaded</li>
        <li data-tab="tab-all">All</li>
        <li data-tab="tab-external">External storage</li>
        <li data-tab="tab-running">Running</li>
        <li data-tab="tab-disabled">Disabled</li>
    </ul>
    <div id="menustripTabs-tab-downloaded" class="md-tab-h md-tab-sel">
        <ul class="md-apps-ul" style="display:none;">
            <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">19/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-camera"></span>Camera<span class="md-app-detail"><span class="md-app-size">43.11MB</span><span class="md-app-date">10/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">9/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">21/10/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">20/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">18/10/2014</span></span></li>
        </ul>
    </div>
    <div id="menustripTabs-tab-external" class="md-tab-h">
        <ul class="md-apps-ul" style="display:none;">
            <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">09/09/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">19/08/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">17/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">16/11/2014</span></span></li>
        </ul>
    </div>
    <div id="menustripTabs-tab-running" class="md-tab-h">
        <ul class="md-apps-ul" style="display:none;">
            <li><span class="md-app-ic mbsc-ic mbsc-ic-clock"></span>Clock<span class="md-app-detail"><span class="md-app-size">1.52MB</span><span class="md-app-date">16/10/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">10/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-bubble"></span>Messages<span class="md-app-detail"><span class="md-app-size">25.57MB</span><span class="md-app-date">09/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">08/11/2014</span></span></li>
        </ul>
    </div>
    <div id="menustripTabs-tab-all" class="md-tab-h">
        <ul class="md-apps-ul" style="display:none;">
            <li><span class="md-app-ic mbsc-ic mbsc-ic-globe"></span>Browser<span class="md-app-detail"><span class="md-app-size">74.68MB</span><span class="md-app-date">18/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">17/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-camera"></span>Camera<span class="md-app-detail"><span class="md-app-size">43.11MB</span><span class="md-app-date">19/10/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-clock"></span>Clock<span class="md-app-detail"><span class="md-app-size">1.52MB</span><span class="md-app-date">10/10/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-user4"></span>Contacts<span class="md-app-detail"><span class="md-app-size">5.43MB</span><span class="md-app-date">11/08/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-copy3"></span>Docs<span class="md-app-detail"><span class="md-app-size">32.41MB</span><span class="md-app-date">19/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">18/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-image2"></span>Gallery<span class="md-app-detail"><span class="md-app-size">1.68MB</span><span class="md-app-date">17/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">18/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-phone"></span>Phone<span class="md-app-detail"><span class="md-app-size">1.28MB</span><span class="md-app-date">19/11/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-foundation-mail"></span>Email<span class="md-app-detail"><span class="md-app-size">6.65MB</span><span class="md-app-date">05/07/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-bubble"></span>Messages<span class="md-app-detail"><span class="md-app-size">25.57MB</span><span class="md-app-date">06/06/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">20/10/2014</span></span></li>
            <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">18/11/2014</span></span></li>
        </ul>
    </div>
    <div id="menustripTabs-tab-disabled" class="md-tab-h">
        <ul class="md-apps-ul" style="display:none;">
            <li><span class="md-app-ic mbsc-ic mbsc-ic-user4"></span>Contacts<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">17/11/2014</span></span></li>
        </ul>
    </div>
    </div>
    <!-- Tab menu END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Icon and Text START -->
    <div id="demo_cont_imageIcons" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <ul mobiscroll-image="settings" mobiscroll-instance="demo" ng-model="selected" style="display:none">
        <li ng-repeat="item in data" data-val="{{item.val}}" data-icon="{{item.icon}}">
          <p>{{item.p}}</p>
        </li>
    </ul>
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Icon and Text END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Step START -->
    <div id="demo_cont_numberStep" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="mynumber" mobiscroll-number="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Step END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Dialog START -->
    <div id="demo_cont_widgetDialog" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
    <div ng-model="mywidget" mobiscroll-widget="settings" mobiscroll-instance="demo" style="display: none;">
         <div class="md-dialog">
            <h3 class="md-text-center">Hi Molly</h3>
            <p class="md-text-center">How are you feeling today?</p>
        </div>
    </div>

    <button ng-click="demo.show()">How are you feeling?</button>
    
    </div>
    <!-- Dialog END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Alert message START -->
    <div id="demo_cont_widgetMessage" class="ng-hide demo-wrapper"  ng-controller="demoController">
    
    <div ng-model="mywidget" mobiscroll-widget="settings" mobiscroll-instance="demo" style="display: none;">
        <div class="md-body">
            <h3>Use Google's location service?</h3>
            <p>Let Google help apps determine location. This meas sending anonymus location data to Google, even when no apps are running.</p>
        </div>
    </div>

    <button ng-click="demo.show()">Use Location Services?</button>
    
    </div>
    <!-- Alert message END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Custom Units START -->
    <div id="demo_cont_scrollerCustomunits" class="ng-hide demo-wrapper"  ng-controller="demoController">
        <input ng-model="myscroller" mobiscroll-scroller="settings" mobiscroll-instance="demo" placeholder="Please Select ..." />
    
        <button ng-click="demo.clear()">Clear</button>
        <button ng-click="demo.show()">Show</button>
    
    </div>
    <!-- Custom Units END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Text Fields START -->
    <div id="demo_cont_formsTextfields" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <div mobiscroll-form="settings" style="display:none">
        <div class="mbsc-divider">Single-line text</div>
    
        <div>
            <label for="formsTextfields-name">Label</label>
            <input id="formsTextfields-name" type="text" placeholder="Text field label" />
        </div>
    
        <label>
            Password
            <input type="password" placeholder="Text field with icon" data-icon="lock2" />
        </label>
        
        <label>
            Password Toggle
            <input type="password" placeholder="Text field with icon" data-icon="lock2" data-password-toggle="true" />
        </label>
    
        <label>
            <input type="text" placeholder="Text field with right icon" data-icon="pencil" data-icon-align="right" />
        </label>
        
        <label>
            <input type="text" placeholder="Text field disabled" disabled/>
        </label>
    
        <label class="mbsc-err">
            <input type="text" placeholder="Text field with error style"  />
        </label>
        
        <label class="mbsc-err">
            <input type="text" placeholder="Text field with error style and message"  />
            <span class="mbsc-err-msg">Error message!</span>
        </label>
        
        <div class="mbsc-divider">Multi-line text</div>
         
        <label>
            Label
            <textarea></textarea>
        </label>
    
        <label>
            <textarea data-icon="pencil" data-icon-align="right"></textarea>
        </label>
    
        <label>
            Label
            <textarea data-icon="bubble" data-icon-align="left"></textarea>
        </label>
    
        <label>
            <textarea placeholder="disabled" disabled></textarea>
        </label>
        
        <label class="mbsc-err">
            <textarea></textarea>
            <span class="mbsc-err-msg">Error message!</span>
        </label>
    </div>
    </div>
    <!-- Text Fields END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Select START -->
    <div id="demo_cont_formsSelect" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <div mobiscroll-form="settings" style="display:none">
        <div class="mbsc-divider">Select</div>
    
        <label>
            Label
            <select class="md-select">
                <option>Select</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </select>
        </label>
        <label>
            <select class="md-select" data-icon="plus" data-icon-align="right">
                <option>Select with icon</option>
                <option value="opel">Opel</option>
                <option value="renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
            </select>
        </label>
        <label>
            <select class="md-select" data-icon="plus" data-icon-align="left">
                <option>Select with right icon</option>
                <option value="Peugeot">Peugeot</option>
                <option value="Porsche">Porsche</option>
                <option value="Fiat">Fiat</option>
                <option value="Volkswagen">Volkswagen</option>
            </select>
        </label>
        <label class="mbsc-err">
            <select class="md-select">
                <option>Select error</option>
                <option value="Ferrari">Ferrari</option>
                <option value="Honda">Honda</option>
                <option value="Suzuki">Suzuki</option>
                <option value="Lamborghini">Lamborghini</option>
            </select>
        </label>
        <label>
            <select disabled>
                <option>Select disabled</option>
                <option value="Bentley">Bentley</option>
                <option value="Morgan">Morgan</option>
                <option value="Chevrolet">Chevrolet</option>
                <option value="Dodge">Dodge</option>
            </select>
        </label>
    </div>
    </div>
    <!-- Select END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Checkbox START -->
    <div id="demo_cont_formsCheckbox" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <div mobiscroll-form="settings" style="display:none">
        <div class="mbsc-divider">Checkbox</div>
    
        <label>
            <input type="checkbox" checked>
            Option 1
            <span class="mbsc-desc">Checked checkbox</span>
        </label>
        <label>
            <input type="checkbox">
            Option 2
            <span class="mbsc-desc">Empty checkbox</span>
        </label>
        <label>
            <input type="checkbox" disabled> 
            Option 3
            <span class="mbsc-desc">Disabled checkbox</span>
        </label>
        <label>
            <input type="checkbox" checked disabled>
            Option 4
            <span class="mbsc-desc">Disabled and checked checkbox</span>
        </label>
    </div>
    </div>
    <!-- Checkbox END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Switch START -->
    <div id="demo_cont_formsSwitch" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <div mobiscroll-form="settings" style="display:none">
        <div class="mbsc-divider">Switch</div>
    
        <label>
            <input data-role="switch" type="checkbox"> Switch Off
            <span class="mbsc-desc">This is description for Switch</span>
        </label>
    
        <label>
            <input data-role="switch" type="checkbox" checked> Switch On
            <span class="mbsc-desc">This is description for Switch 2</span>
        </label>
        <label>
            <input data-role="switch" type="checkbox" disabled> Disabled Switch Off
        </label>
        <label>
            <input data-role="switch" type="checkbox" disabled checked> Disabled Switch On
        </label>
    </div>
    </div>
    <!-- Switch END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Radio buttons START -->
    <div id="demo_cont_formsRadiobtn" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <div mobiscroll-form="settings" style="display:none">
        <div class="mbsc-divider">Radio buttons</div>
    
        <label>
            <input type="radio" name="group" checked> Radio Option 1
            <span class="mbsc-desc">This is description for radio 1</span>
        </label>
        <label>
            <input type="radio" name="group"> Radio Option 2
            <span class="mbsc-desc">This is description for radio 2</span>
        </label>
        <label>
            <input type="radio" name="group"> Radio Option 3
        </label>
        <label>
            <input type="radio" name="group" disabled> Disabled
        </label>
    </div>
    </div>
    <!-- Radio buttons END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Buttons START -->
    <div id="demo_cont_formsButtons" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <div mobiscroll-form="settings" style="display:none">
        <div class="mbsc-divider">Buttons</div>
    
        <div class="mbsc-btn-group">
            <button>Button</button>
            <button disabled>Disabled</button>
        </div>
    
        <div class="mbsc-padding">
            <button class="mbsc-btn-block">Full width button</button>
            <button class="mbsc-btn-block" disabled>Disabled full width</button>
        </div>
    
    <div class="mbsc-divider">Icons</div>
    
        <div class="mbsc-btn-group">
            <button data-icon="tag"></button>
            <button data-icon="heart"></button>
            <button data-icon="flag" disabled></button>
        </div>
        <div class="mbsc-btn-group">
            <button data-icon="tag">Tag</button>
            <button data-icon="heart">Favorite</button>
            <button data-icon="flag" disabled>Flag</button>
        </div>
        
        <div class="mbsc-divider">Flat Buttons</div>
        <div class="mbsc-btn-group">
            <button class="mbsc-btn-flat">Flat</button>
            <button class="mbsc-btn-flat" data-icon="arrow-left5">Flat & Icon</button>
            <button class="mbsc-btn-flat" data-icon="arrow-left5"></button>
            <button class="mbsc-btn-flat" data-icon="key2" disabled></button>
            <button class="mbsc-btn-flat" disabled>Flat disabled</button>
        </div>
    </div>
    </div>
    <!-- Buttons END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Typography START -->
    <div id="demo_cont_formsTypography" class="ng-hide demo-wrapper"  ng-controller="demoController" style="font-family: inherit;">
        <div mobiscroll-form="settings" mbsc-enhance>	
        <div class="mbsc-padding">
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>
            <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
            <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
            <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
            <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
        </div>
        </div>
    </div>
    
    <!-- Typography END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Slider START -->
    <div id="demo_cont_formsSlider" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <div mobiscroll-form="settings" style="display:none">
        <div class="mbsc-divider">Sound settings</div>
        <label>
            <input type="range" value="30" data-icon='{ "left": "volume-mute2", "right": "volume-high" }' />
        </label>
        <label>
            <input type="range" value="50" data-icon="alarm2" disabled />
        </label>
        <label>
            Weight
            <input type="range" value="130" min="80" max="300" data-val="left" data-template="{value} lbs" data-highlight="false" />
        </label>
        <label>
            Price
            <input type="range" value="100" min="0" max="500" step="25" data-tooltip="true" data-step-labels="[0, 100, 200, 300, 400, 500]">
            <input type="range" value="400" min="0" max="500" step="25" />
        </label>
        <label>
            Steps
            <input type="range" value="50" min="0" max="100" step="25" data-step-labels="[0, 25, 50, 75, 100]">
        </label>
        <label>
            Multiple
            <input type="range" value="100" min="0" max="3000" data-tooltip="true" data-step-labels="[0, 500, 1000, 1500, 2000, 2500, 3000]">
            <input type="range" value="500" min="0" max="3000" />
            <input type="range" value="2000" min="0" max="3000" />
            <input type="range" value="2800" min="0" max="3000" />
        </label>
    </div>
    </div>
    <!-- Slider END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Stepper START -->
    <div id="demo_cont_formsStepper" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <div mobiscroll-form="settings" style="display:none">
        <div class="mbsc-divider">Passengers</div>
        <div>
            <label for="formsStepper-md-adults">Adults</label>
            <span class="mbsc-desc">From 14 years</span>
            <input id="formsStepper-md-adults" type="number" data-role="stepper" min="1" value="1" max="15" />
        </div>
    
        <div>
            <label for="formsStepper-md-children">Children</label>
            <span class="mbsc-desc">2-14 years</span>
            <input id="formsStepper-md-children" type="number" data-role="stepper" max="15" data-val="left" />
        </div>
    
        <div>
            <label for="formsStepper-md-infant">Infant</label>
            <span class="mbsc-desc">0-2 years</span>
            <input id="formsStepper-md-infant" type="number" data-role="stepper" data-val="left"  max="10" />
        </div>
            
        <label>
            Allow overweight luggage
            <input ng-model="allowOwerweight" type="checkbox">
        </label>
    
        <div>
            <label for="formsStepper-md-luggage">Luggage</label>
            <span class="mbsc-desc">(kg)</span>
            <input id="formsStepper-md-luggage" type="number" class="md-luggage" data-role="stepper" data-val="left" min="30" max="80" step="5" value="30" ng-disabled="!allowOwerweight" />
        </div>
        
        <div class="mbsc-divider">Stepper with Numpad</div>
        
        <div>
            <label for="formsStepper-md-consumption">Consumption</label>
            <div class="mbsc-desc">(mpg)</div>
            <input type="number" data-role="stepper" ng-model="consumption" data-val="left" min="5" max="120" step=".5" value="30" ng-click="numpadInst.show()" readonly />
            <div class="md-numpad" mobiscroll-numpad="numpadSettings" ng-model="consumption" mobiscroll-instance="numpadInst"></div>
        </div>
        
    </div>
    </div>
    <!-- Stepper END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Progress START -->
    <div id="demo_cont_formsProgress" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <div mobiscroll-form="settings" style="display:none">
        <label>
            Downloading
            <progress ng-model="downloadVal" value="0" max="100" data-icon='{ "left": "cloud-download" }' data-val="right" mobiscroll-progress></progress>
        </label>
        
        <div class="mbsc-btn-group">
            <button class="mbsc-btn md-restart" ng-click="startDownload()">Restart</button>
        </div>
        
        <label>
            Processing
            <progress ng-model="processVal" value="0" max="100" data-step-labels="[0, 25, 50, 75, 100]" mobiscroll-progress></progress>
        </label>
        
        <div class="mbsc-btn-group">
            <button class="mbsc-btn" ng-click="updateProgress()">Update progress</button>
        </div>
    	
        <div class="mbsc-divider">Cloud upload</div>
        <label class="md-upload">
            <progress  value="0" ng-model="uploadVal" max="100" data-step-labels="[0, 33, 66, 100]" data-icon='{ "left": "cloud-upload" }' mobiscroll-progress></progress>
        </label>
        
        <div class="mbsc-btn-group">
            <button class="mbsc-btn" ng-click="startUpload()">Restart upload</button>
        </div>
        
        <div class="mbsc-divider">Checkout process</div>
        <label class="md-demo">
            <progress ng-model="checkoutVal" value="0" max="100" data-step-labels="[0, 33, 66, 100]" mobiscroll-progress></progress>
        </label>
    
        <div class="mbsc-btn-group">
            <button class="mbsc-btn" ng-click="updateCheckout()">Next step</button>
        </div>
    </div>    
    </div>
    <!-- Progress END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Segmented START -->
    <div id="demo_cont_formsSegmented" class="ng-hide demo-wrapper"  ng-controller="demoController">
    <div mobiscroll-form="settings" style="display:none">
    <div class="mbsc-divider">Single select</div>
        <label>
            Day
            <input type="radio" data-role="segmented" name="range">
        </label>
        <label>
            Week
            <input type="radio" data-role="segmented" name="range" checked>
        </label>
        <label>
            Month
            <input type="radio" data-role="segmented" name="range">
        </label>
        <label>
            Year
            <input type="radio" data-role="segmented" name="range" checked>
        </label>

        <div class="mbsc-divider">Multiple select</div>
        
        <label>
            S
            <input type="checkbox" data-role="segmented" name="week" disabled>
        </label>
        <label>
            M
            <input type="checkbox" data-role="segmented" name="week" checked>
        </label>
        <label>
            T
            <input type="checkbox" data-role="segmented" name="week" >
        </label>
        <label>
            W
            <input type="checkbox" data-role="segmented" name="week" >
        </label>
        <label>
            T
            <input type="checkbox" data-role="segmented" name="week" checked>
        </label>
        <label>
            F
            <input type="checkbox" data-role="segmented" name="week" >
        </label>
        <label>
            S
            <input type="checkbox" data-role="segmented" name="week" disabled>
        </label>
        
        <div class="mbsc-divider">Text and Icon</div>
        
        <label>
            Featured
            <input type="radio" data-role="segmented" data-icon="material-star" name="app" checked>
        </label>
        <label>
            Explore
            <input type="radio" data-role="segmented" data-icon="material-explore" name="app">
        </label>
        <label>
            Updates
            <input type="radio" data-role="segmented" data-icon="material-system-update" name="app">
        </label>
        
        <div class="mbsc-divider">Icon</div>
        
        <label>
            <input type="radio" data-role="segmented" data-icon="fa-mail-reply" name="settings">
        </label>
        <label>
            <input type="radio" data-role="segmented" data-icon="fa-retweet" name="settings">
        </label>
        <label>
            <input type="radio" data-role="segmented" data-icon="star3" name="settings" checked>
        </label>
        <label>
            <input type="radio" data-role="segmented" data-icon="cogs" name="settings">
        </label>
    
        <div class="mbsc-divider">Disabled</div>
        
        <label>
            Idividual
            <input type="radio" data-role="segmented" name="org" disabled checked>
        </label>
        <label>
            Team
            <input type="radio" data-role="segmented" name="org" disabled>
        </label>
        <label>
            Company
            <input type="radio" data-role="segmented" name="org" disabled>
        </label>
    
    </div>
    </div>
    <!-- Segmented END -->
    <!-- ------------------------------------------------------------------------------- -->

</body>

</html>
